import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { AppComponent } from './app.component'
import { MobxAngularModule } from 'mobx-angular'
import { FormsModule } from '@angular/forms'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import {
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatFormFieldModule,
  MatInputModule,
  MatListModule
} from '@angular/material'
import { BalanceComponent } from './balance/balance.component'
import { Account } from './stores/account.store'
import { SampleComponent } from './sample/sample.component'
import { ListComponent } from './sample/list.component'
import { PortalComponent } from './sample/portal.component'
import { PortalCompComponent } from './sample/portal-comp.component'
import { PortalModule } from '@angular/cdk/portal'
import { OverlayModule } from '@angular/cdk/overlay'
import { SelectionSampleComponent } from './sample/selection-sample.component'
import { StoreComponent } from './sample/store.component'
import { SelectionSample2Component } from './sample/selection-sample2.component';
import { ViewModelComponent } from './sample/view-model.component';
import { CalandarSampleComponent } from './sample/calandar-sample.component';

const MATS = [
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatCardModule,
  MatListModule,
  MatCheckboxModule,
]

@NgModule({
  declarations: [
    AppComponent,
    BalanceComponent,
    SampleComponent,
    ListComponent,
    PortalComponent,
    PortalCompComponent,
    SelectionSampleComponent,
    SelectionSample2Component,
    StoreComponent,
    ViewModelComponent,
    CalandarSampleComponent,
  ],
  imports: [
    BrowserModule,
    MobxAngularModule,
    FormsModule,
    BrowserAnimationsModule,
    PortalModule,
    OverlayModule,
    ...MATS,
  ],
  providers: [ Account ],
  bootstrap: [ AppComponent ],
  entryComponents: [ PortalCompComponent ],
})
export class AppModule {
}
